<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">关联跟踪号</span>
        </el-col>
      </div>
      <el-col :span="7">
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>九方子单号:</span>
          </el-col>
          <el-col :span="16">
            <el-input
              size="mini"
              :rows="10"
              v-model="subWaybillNo"
              ref="ref_1"
              @keyup.enter.native="findOrderNo"
              placeholder="支持九方子单号/FBA箱号混合查找"
            ></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>跟踪号:</span>
          </el-col>
          <el-col :span="16">
            <el-input
              size="mini"
              :rows="10"
              v-model="trackNo"
              ref="ref_2"
              @keyup.enter.native="findOrderNo"
              placeholder="非必填，如果不想录入请手动移动光标"
            ></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;margin-bottom: 10px;margin-left: 16%">
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="findOrderNo">
              确定
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="withdraw">
              撤回
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div class="showNum">
          <span>{{ hasCount }}</span>
        </div>
      </el-col>
      <el-col :span="6" class="text-info">
        <div>
          <span>应扫描数:</span>
          <span>{{ count }}</span>
        </div>
        <div>
          <span>剩余数:</span>
          <span>{{ remainCount }}</span>
        </div>
      </el-col>
      <el-col :span="8" class="text-info">
        <div>
          <span>运单号:</span>
          <span>{{ waybillNo }}</span>
        </div>
        <div>
          <span>渠道名称:</span>
          <span>{{ customerChannelName }}</span>
        </div>
        <div>
          <span>目的国家:</span>
          <span>{{ countryName }}</span>
        </div>
        <div>
          <span>客户简称:</span>
          <span>{{ customerNameShort }}</span>
        </div>
        <div>
          <span>客户代码:</span>
          <span>{{ customerCode }}</span>
        </div>
      </el-col>
      <el-col :span="2">
        <el-row style="margin-bottom: 30px;">
          <el-col :span="4">
            <el-button
              size="mini"
              type="primary"
              @click="saveAssociatTrackNum"
              style="margin-left: 19%;margin-top: 134px;"
            >
              保存
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table :data="subWaybills" style="width: 100%">
        <el-table-column prop="subWaybillNo" label="已扫子单号" />
        <el-table-column prop="hsubNumber" label="已扫FBA号" />
        <el-table-column prop="htrackNo" label="已扫跟踪号" />
      </el-table>
    </el-card>
  </div>
</template>
<script>
  import { ajax } from "@/store/yg/common/utils";
  import axios from "axios";
  import * as constant from "@/store/yg/common/constant";
  import {Toast} from "mint-ui";

  export default {
    components: {},
    props: [],
    data() {
      return {
        subWaybills: [
          {
            subWaybillNo: "",
            hsubNumber: "",
            htrackNo: ""
          }
        ],
        subwaybill: {
          subWaybillNo: "",
          hsubNumber: "",
          htrackNo: ""
        },
        disable1: true,
        disable2: false,
        subWaybillNo: "",
        trackNo: "",
        hasCount: "",
        count: 0,
        remainCount: "",
        waybillNo: "",
        customerChannelName: "",
        countryName: "",
        customerNameShort: "",
        customerCode: "",
        waybillId: "",
        arrCounts: [],
        cursubNo: "",
        subBoxNoMap: {},
        subWaybillList: [],
        trackNoMap: {}
      };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.initDat();
    },
    methods: {
      initDat() {
        this.subWaybills = [];
        this.$refs.ref_1.focus();
      },
      findOrderNo() {
        if (this.subWaybillNo && 0 == this.trackNo.length && this.disable1) {
          this.disable1 = false;
          this.disable2 = true;
          if (0 == this.arrCounts.length) {
            this.mixSearchOrder(this.subWaybillNo);
          } else {
            this.mixSearchOrder1(this.subWaybillNo);
          }
        }
        if (0 < this.trackNo.length&&this.disable2) {
          this.disable1 = true;
          this.disable2 = false;
          this.showTrackNoInfo(this.trackNo);
        }
      },
      showTrackNoInfo(trackNumber) {
        var flag = false;
        for (var subWaybill in this.subWaybillList) {
          console.log(this.subWaybillList[subWaybill]);
          if (trackNumber === this.subWaybillList[subWaybill].trackNumber) {
            flag = true;
          }
        }
        /**
        if (!flag) {
          this.$message.error('追踪号不属于当前运单！');
          this.$refs.ref_3.focus();
          return false;
        }**/
        var strategy = this.subWaybills.pop();
        strategy.htrackNo = trackNumber;
        this.subWaybills.push(strategy);
        var has = this.cursubNo in this.trackNoMap;
        if (!has) {
          this.trackNoMap[this.cursubNo] = trackNumber;
        }
        this.$refs.ref_1.focus();
        this.trackNo = "";
        /*ajax("checkTrackNo", {
          trackNoStr: trackNumber,
          waybillId: this.waybillId
        }).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              var strategy = this.subWaybills.pop();
              strategy.htrackNo = trackNumber;
              this.subWaybills.push(strategy);
              this.$refs.ref_1.focus();
              this.trackNo = "";
            } else {
              this.$message.error(res.message);
              this.disable1 = false;
              this.disable2 = true;
              this.trackNo = "";
            }
          },
          error => {
            console.log(error);
            this.disable1 = false;
            this.disable2 = true;
            this.trackNo = "";
          }
        );*/
      },
      mixSearchOrder(subNoVal) {
        ajax("searchWaybillBySubWaybillNo", { subNoVal: subNoVal }).then(
          res => {
            if (res.code == 200) {
              var data = res.data;
              this.subWaybillList = data.subWaybills;
              this.cursubNo = data.cursubNo;
              this.count = data.count;
              this.remainCount = data.count;
              this.waybillId = data.waybillId;
              if (this.cursubNo > this.count) {
                qiao.bs.alert("子单号不存在");
                return;
              }
              this.arrCounts.push(this.cursubNo);
              this.waybillNo = data.waybillNo; // 运单号
              this.customerChannelName = data.customerChannelName; // 渠道名称
              this.countryName = data.countryName; // 国家
              this.customerNameShort = data.customer.customerNameShort; // 客户简称
              this.customerCode = data.customer.customerCode; // 客户代码
              //this.subWaybills = data.subWaybills;
              this.hasCount = this.arrCounts.length;
              this.remainCount = parseInt(this.count) - parseInt(this.hasCount);
              this.subwaybill = {};
              this.subwaybill.subWaybillNo =
                this.waybillNo +
                "_" +
                data.subWaybills[this.cursubNo - 1].subWaybillNo;
              this.subwaybill.hsubNumber =
                data.subWaybills[this.cursubNo - 1].boxNo;
              for (var subwaybill of data.subWaybills){
                var subWaybillNo = subwaybill.subWaybillNo;
                var boxNo = subwaybill.boxNo;
                this.subBoxNoMap[subWaybillNo] = boxNo;
              }
              this.subWaybills.push(this.subwaybill);
              this.$refs.ref_2.focus();
              this.subWaybillNo = "";
            } else {
              if (res.message){
                this.$message.error(res.message);
              }else{
                this.$message.error("异常");
              }
              this.disable1 = true;
              this.disable2 = false;
              this.subWaybillNo = "";
            }
          },
          error => {
            console.log(error);
            this.disable1 = true;
            this.disable2 = false;
            this.subWaybillNo = "";
          }
        );
      },
      mixSearchOrder1(subNoVal) {
        if (-1 != subNoVal.indexOf("-")) {
          if (this.waybillNo == subNoVal.substr(0, subNoVal.indexOf("-"))) {
            this.cursubNo = subNoVal.substr(subNoVal.indexOf("-") + 1,subNoVal.length); //当前子单号
            if (this.cursubNo > this.count) {
              this.$message.error("子单号不存在");
              this.$refs.ref_1.focus();
              this.disable1 = true;
              this.disable2 = false;
              return false;
            }
            if (-1 < this.arrCounts.indexOf(this.cursubNo)) {
              this.$message.error("当前货箱已经扫描");
              this.$refs.ref_1.focus();
              this.disable1 = true;
              this.disable2 = false;
              return false;
            }
            this.arrCounts.push(this.cursubNo); // 已经扫描件数
            this.hasCount = this.arrCounts.length; // 总件数
            this.remainCount = parseInt(this.count) - parseInt(this.hasCount);
            var hfbaNumber = this.subBoxNoMap[this.cursubNo]; //当前FBA号
            this.subwaybill = {};
            this.subwaybill.subWaybillNo = subNoVal;
            this.subwaybill.hsubNumber = hfbaNumber;
            this.subWaybills.push(this.subwaybill);
            this.$refs.ref_2.focus();
            this.subWaybillNo = "";
          } else {
            this.$message.error("一次只能扫描一个运单的数据");
            this.$refs.ref_1.focus();
            this.disable1 = true;
            this.disable2 = false;
            return false;
          }
        } else {
          var tmpcursubNo = "";
          for (const i in this.subBoxNoMap) {
            if (subNoVal == this.subBoxNoMap[i]) {
              tmpcursubNo = i;
            }
          }
          if (!tmpcursubNo) {
            this.$message.error("FBA号错误");
            this.$refs.ref_1.focus();
            return false;
          }
          if (this.arrCounts.includes(tmpcursubNo)) {
            this.$message.error("当前货箱已经扫描");
            this.$refs.ref_1.focus();
            this.disable1 = true;
            this.disable2 = false;
            return false;
          }
          this.cursubNo = tmpcursubNo;
          this.arrCounts.push(this.cursubNo);
          this.hasCount = this.arrCounts.length; // 已经扫描件数
          this.remainCount = parseInt(this.count) - parseInt(this.hasCount);// 剩余件数
          this.subNoVal = this.waybillNo + "-" + this.cursubNo;
          var hfbaNumber = this.subBoxNoMap[this.cursubNo]; //当前FBA号
          this.subwaybill = {};
          this.subwaybill.subWaybillNo =  this.subNoVal;
          this.subwaybill.hsubNumber = hfbaNumber;
          this.subWaybills.push(this.subwaybill);
          this.$refs.ref_2.focus();
          this.subWaybillNo = "";
        }
      },
      withdraw() {
        if (this.subWaybills[this.subWaybills.length-1].htrackNo) {
          if (this.remainCount + this.hasCount == this.count) {
            this.remainCount = ++this.remainCount; // 剩余件数
          }
          this.hasCount = --this.hasCount;
          this.$delete(this.subWaybills[this.subWaybills.length - 1], "htrackNo");
          this.$refs.ref_2.focus();
          this.disable1 = false;
          this.disable2 = true;
        }
      },
      saveAssociatTrackNum() {
        if (!this.waybillId) {
          this.$message.error("请先录入数据");
          this.$refs.ref_1.focus();
          return false;
        }
        if (this.count != this.hasCount) {
          this.$message.error("已扫件数不等于应扫描件数");
          this.$refs.ref_1.focus();
          return false;
        }
        var has = this.waybillId in this.trackNoMap;
        if (!has) {
          this.trackNoMap["waybillId"] = this.waybillId;
        }
        var trackNoStr = JSON.stringify(this.trackNoMap);
        ajax("saveAssociatTrackNum", { trackNoStr: trackNoStr }).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success("保存成功");
              location.reload();
            }else{
              if (res.message){
                this.$message.error(res.message);
              }else{
                this.$message.error("保存失败");
              }
            }
          },
          error => {
            console.log(error);
            this.$message.error("保存失败，" + error);
          }
        );
      }
    }
  };
</script>
<style></style>
<style lang="scss" scoped>
  .showNum {
    border: 2px solid red;
    width: 3em;
    height: 3em;
    margin: 0 auto;
    line-height: 3em;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    color: red;
    font-size: 26px;
  }

  .text-info div {
    margin-bottom: 14px;
  }
</style>
